<template>
  <div>
    <div>
      <el-button type="primary" @click="addEdit('add')"><i class="iconfont icon-plus"></i>添加</el-button>
    </div>
    <div>
      <el-table
        :data="rolerList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="角色描述"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addEdit('edit', scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_getRolerList"
        @size-change="_getRolerList"
        :page-sizes="pageSizeArr"
        :page-size.sync="page.limit"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 添加编辑角色 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="initData">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="角色名称" label-width="120px" prop="role_name">
          <el-input placeholder="请输入" v-model="form.role_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" label-width="120px" prop="remark">
          <el-input placeholder="请输入" v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" label-width="120px" >
          <el-tree 
            :data="menuList" 
            :props="defaultProps" 
            node-key="menu_id"
            show-checkbox
            ref="tree"
          ></el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getRolerList, addOrEditRole, delRole, getRoleInfo, getMenuList} from 'api/RoleAuthorityManagement'
import { pageSizeArr } from 'common/config/constConfig'
export default {
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加角色'
      }else{
        return '编辑角色'
      }
    }
  },
  data() {
    return {
      pageSizeArr,
      defaultProps: {
        children: 'childs',
        label: 'menuZHName'
      },
      rules: {
        role_name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      menuList: [],
      rolerList: [],
      form: {},
      page: {
        total: 0,
        page: 1,
        limit: 10
      },
      dialogMode: 'add',
      dialogFormVisible: false
    }
  },
  methods: {
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delRole(row)
      })
    },
    _delRole(row){
      delRole(row.role_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    addEdit(type, row){
      this.dialogMode = type
      this.dialogFormVisible = true
      if(row){
        getRoleInfo(row.role_id).then(res => {
          let menuArr = res.rData[0].meun
          delete res.rData[0].meun
          this.form = res.rData[0]
          // 过滤出选中的节点
          this.$refs.tree.setCheckedKeys(this.filterCheck(menuArr))
        })
      }
    },
    filterCheck(menuArr){
      let arr = []
      function r(menuArr){
        menuArr.forEach(item => {
          if(item.childs.length > 0 && item.enable===1){
            r(item.childs)
          }else if(item.enable===1){
            arr.push(item.menu_id)
          }
        })
      }
      r(menuArr)
      return arr
    },
    handleConfirm(){
      this.$refs['form'].validate().then(() => {
        let data = this.form
        let check = this.$refs.tree.getCheckedKeys()
        let halfCheck = this.$refs.tree.getHalfCheckedKeys()
        data.menus = check.concat(halfCheck)
        addOrEditRole(data).then(res => {
          if(res){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this._caozuoAfter()
          }
        })
      })
    },
    initData(){
      this.form = {}
      this.$refs.tree.setCheckedKeys([])
    },
    _caozuoAfter(){
      this.dialogFormVisible = false
      this.page.page = 1
      this._getRolerList()
    },
    _getRolerList(){
      let data = {}
      data.pageInfo = {...this.page}
      getRolerList(this.page.page).then(res => {
        this.page.total = res.pageInfo.Total
        this.rolerList = res.rData
      })
    },
    _getMenuListApi(){
      getMenuList().then(res => {
        this.menuList = res.rData
      })
    }
  },
  created(){
    this._getRolerList()
    this._getMenuListApi()
  }
}
</script>